<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue3 作用域插槽示例</title>
		<script src="https://unpkg.com/vue@3"></script>
		<style>
			.item {
				border: 1px solid #eee;
				padding: 1rem;
				margin: 1rem 0;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			.item p {
				margin: 0.5rem 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<fancy-list :api-url="url" :per-page="10">
				<template #item="{ body, username, likes }">
					<div class="item">
						<p>{{ body }}</p>
						<p>by {{ username }} | {{ likes }} likes</p>
					</div>
				</template>
			</fancy-list>
		</div>

		<script>
			const { createApp, defineComponent } = Vue;

			// FancyList 组件
			const FancyList = defineComponent({
				props: {
					apiUrl: String,
					perPage: Number,
				},
				setup(props) {
					// 模拟数据 - 实际应用中应该从apiUrl获取数据
					const items = Array.from({ length: props.perPage }, (_, i) => ({
						id: i + 1,
						body: `This is item ${i + 1}`,
						username: `User ${i + 1}`,
						likes: Math.floor(Math.random() * 100),
					}));

					return { items };
				},
				template: `
        <div>
          <div v-for="item in items" :key="item.id">
            <slot name="item" :body="item.body" 
                  :username="item.username" 
                  :likes="item.likes"></slot>
          </div>
        </div>
      `,
			});

			// 创建 Vue 应用
			createApp({
				components: { FancyList },
				data() {
					return {
						url: '/api/items', // 示例API地址
					};
				},
			}).mount('#app');
		</script>
	</body>
</html>
